<template>
  <div class="fr page">
    <div class="sui-pagination clearfix">
      <ul>
        <li class="prev disabled"  :disabled="pageNo==1" >
          <a @click="$emit('getPageNo',pageNo-1)">«上一页</a>
        </li>
        <li>
          <a v-if="startNamberAndEndNumber.start > 1" @click="$emit('getPageNo',1)" :class="{active:pageNo==1}">1</a>
        </li>
        <li class="dotted" v-if="startNamberAndEndNumber.start > 2">
          <span>...</span>
        </li>
        <!-- 中间部分 -->
        <li>
          <a
            v-for="(page, index) in startNamberAndEndNumber.end"
            :key="index"
            v-if="page >= startNamberAndEndNumber.start"
            @click="$emit('getPageNo',page)"
            :class="{active:pageNo==page}"
            >{{ page }}</a
          >
        </li>
        <li class="dotted" v-if="startNamberAndEndNumber.end < totalPage - 1">
          <span>...</span>
        </li>
        <li v-if="startNamberAndEndNumber.end<totalPage">
          <a @click="$emit('getPageNo',totalPage)" :class="{active:pageNo==totalPage}">{{totalPage}}</a>
        </li>
        <li class="next">
          <a :disabled="pageNo==totalPage" @click="$emit('getPageNo',pageNo+1)">下一页»</a>
        </li>
      </ul>
      <div>
    <span>共{{ total }}条</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Pagination",
  //   pageNo：当前第几页
  //   pageSize：每一个展示多少条数据
  //   total：一共有多少条数据
  //   continues：分页连续的页码个数
  props: ["pageNo", "pageSize", "total", "continues"],
  computed: {
    //总共有多少页
    totalPage() {
      // 向上取整
      return Math.ceil(this.total / this.pageSize);
    },
    startNamberAndEndNumber() {
      const { continues, pageNo, totalPage } = this;
      //先定义两个变量存储起始和结束数字
      let start = 0,
        end = 0;
      // 如果出现页码太少，比连续页码个数少的情况下，就直接赋值
      if (continues > totalPage) {
        start = 1;
        end = totalPage;
      } else {
        // 正常情况下
        start = pageNo - parseInt(continues / 2);
        end = pageNo + parseInt(continues / 2);
        // start出现0|-1情况下（前面几页会出现的情况）
        if (start < 1) {
          start = 1;
          end = continues;
        }
        // end数字大于页码总数
        if (end > totalPage) {
          end = totalPage;
          start = totalPage - continues + 1;
        }
      }
      return { start, end };
    },
  },
};
</script>

<style scoped lang='less'>
.page {
  width: 880px;
  height: 66px;
  overflow: hidden;
  float: right;

  .sui-pagination {
    margin: 18px 0;

    ul {
      margin-left: -5px;
      margin-bottom: 0;
      vertical-align: middle;
      width: 640px;
      float: left;

      li {
        line-height: 18px;
        display: inline-block;
            cursor:pointer;

        a {
          position: relative;
          float: left;
          line-height: 18px;
          text-decoration: none;
          background-color: #fff;
          border: 1px solid #e0e9ee;
          margin-left: -1px;
          font-size: 14px;
          padding: 9px 18px;
          color: #333;
        }
        &.prev {
          a {
            background-color: #fafafa;
          }
        }

        &.disabled {
          a {
            color: #999;
            cursor: default;
          }
        }

        &.dotted {
          span {
            margin-left: -1px;
            position: relative;
            float: left;
            line-height: 18px;
            text-decoration: none;
            background-color: #fff;
            font-size: 14px;
            border: 0;
            padding: 9px 18px;
            color: #333;
          }
        }

        &.next {
          a {
            background-color: #fafafa;
          }
        }
      }
    }

    div {
      color: #333;
      font-size: 14px;
      float: right;
      width: 241px;
      margin-top: 10px;
    }
  }
}
.active {
    background-color: pink !important;
    color: #000!important;
}
</style>